<template>
    <div class="listDiv">
        <div class="searchDiv">
            <el-select v-model="obj.req.state" placeholder="全部状态" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.stateTypeAry" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-input clearable placeholder="匹配题目名称" v-model="obj.req.key" class="search_key" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight">
            </div>
        </div>
        <div style="display: flex; flex-direction: row;">
            <div class="lefttb">
                <div class="table_box">
                    <div class="table_" id="tb">
                        <ul class="head">
                            <li class="mxw50">选择</li>
                            <li class="mxw200">题干</li>
                            <li class="mxw80">类型</li>
                            <li class="mxw50">分数</li>
                            <li class="mxw50">答案</li>
                        </ul>
                        <div class="body">
                            <ul v-for="x in obj.ary" :key="x">
                                <li class="mxw50"><el-checkbox v-model="x.check" @change="t => itemchange(t, x)" /></li>
                                <li class="mxw200">
                                    <div class="lineOne">{{x.title}}</div>
                                    <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    :content="x.title"
                                    placement="top-start"
                                    >
                                    <div class="lineOne">{{x.title}}</div>
                                    </el-tooltip>
                                </li>
                                <li class="mxw80">{{proxy.$utils.find(globalData.subjectTypeList, x.type)}}</li>
                                <li class="mxw50">{{x.fen}}</li>
                                <li class="mxw50">{{x.answer}}</li>
                            </ul>
                    </div>
                </div>
                </div><Pager :value="obj.req" :init="init" />
            </div>
            <div class="righttb">
                <el-input clearable placeholder="请输入试卷名称" v-model="obj.paper.name" style="margin-right: 10px;" />
                <div class="table_box">
                    <div class="table_" id="tb" style="margin-top: 10px;">
                        <ul class="head">
                            <li class="liflex">标题</li>
                            <li class="li3">分数</li>
                            <li class="li6">操作</li>
                        </ul>
                        <div class="body">
                            <ul v-for="(x,i) in obj.paper.ids" :key="i">
                                <li class="liflex">{{x.title}}</li>
                                <li class="li3">{{x.fen}}</li>
                                <li class="del_btn"><u @click="del(x,i)">删除</u></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div style="display: flex; align-items: center; justify-content: flex-end;">
                    <span class="cou" v-if="obj.show">总分 {{obj.paper.ids.map(t=>parseInt(t.fen)).reduce((n,t)=>n+t, 0)}}</span>
                    <span class="btn clear" @click="$emit('close')">取消</span>
                    <span class="btn sub" @click.prevent="upData">提交</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, inject, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        ary: [],
        req: {
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
            state:"",
        },
        show:true,
        paper:{
            id:inject("id").value || 0,
            name:"",
            ids:[],
            fen: 0
        },
    });
    let itemchange = (t,x) => {
        let i = obj.paper.ids.findIndex(p => p.subject_id==x.subject_id)
        if(t){ //从未选中到选中，要添加到ids里
            //也要先找有没有，如是修改的情况下，可能是有，有的情况下不用加入到数组里
            if(i <= 0) obj.paper.ids.push(x)
        }else{
            
            if(i > -1){
                obj.paper.ids.splice(i, 1)
            }
        }
    }
    let del = (x,i) => {
        obj.paper.ids.splice(i, 1)
        let tmp = obj.ary.find(p => p.subject_id == x.subject_id)
        if(tmp != null){
            tmp.check = false
        }
    }
    let init = () => {
        proxy.$ajax({
            url: '/evaluation_subject/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }
    let getPaper = () => {
        if(obj.paper.id > 0){
            proxy.$ajax({
                url: '/evaluation_paper/get',
                data: obj.paper,
                bfLoading: true
            }).then(d => {
                console.log(d)
                obj.paper = {...obj.paper, ...d.msg}
            }).catch(() => { })
        }
    }
    getPaper()
    let upData = () => {
        if(obj.paper.name.trim() == ""){
            proxy.elMessageMixin("请输入试卷名称", "error");
            return
        }
        if(obj.paper.ids.length <= 0){
            proxy.elMessageMixin("请选择至少一道题目", "error");
            return
        }
        obj.show=false //省得烦
        obj.paper.fen = obj.paper.ids.map(t=>parseInt(t.fen)).reduce((n,t)=>n+t, 0)
        obj.paper.ids = obj.paper.ids.map(t => t.subject_id)
        console.log(obj.paper)
        // return
        proxy.$ajax({
            url: '/evaluation_paper/design',
            data: obj.paper,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                proxy.elMessageMixin(`${obj.paper.id>0?'修改':"添加"}成功`, 'success')
                proxy.$emit('init')
                proxy.$emit('close')
            }
        }).catch(() => { })
    }

</script>

<style scoped>
    ::-webkit-scrollbar { width:0px; background-color: #FFFFFF; }
    .listDiv { top: 70px; }
    .search_select { width:100px!important; }
    .search_key { width:160px!important; }
    .lefttb { flex: 3; }
    .righttb { flex: 1; padding-left: 10px; }
    .cou { font-size: 14px; height: 40px; margin-right: 20px; }
    #tb ul li.li0 { width: 30px; }
    #tb ul li.li1 { width: 100px; }
    #tb ul li.li2 { width: 100px; }
    #tb ul li.li3 { width: 45px; }
    #tb ul li.li4 { width: 45px; }
    #tb ul li.li6 { width: 60px; }
</style>